<template>
  <div class="help-item">
    <template v-for="(item, index) in list" :key="index">
      <section class="help-mian-content">
        <div class="help-content">
          <div class="help-main-title">
            {{ item.data.itemName }}
          </div>
          <div v-if="index == 0" class="help-list-tpl flex-s">
            <NoviceItem
              :noviceItem="{
                itemName: item.data.itemName,
                itemId: item.data.itemId,
              }"
              v-for="item in novice"
              :key="item.data.itemId"
            ></NoviceItem>
          </div>
          <ComList v-if="index == 1" :itemId="item.data.itemId"></ComList>
        </div>
      </section>
    </template>

    <!-- <ModalAwait v-model:visible="awaitVisible" /> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, ref, onMounted } from "vue";
import { ComList, NoviceItem } from "./src/index";
import { getArticleTreeApi } from "/@/api/article";
export default defineComponent({
  name: "helpItem",
  components: {
    NoviceItem,
    ComList,
  },
  props: {
    list: {
      type: Array as any,
      default: [],
    },
  },
  setup(props) {
    const { list } = toRefs(props);

    const getItemIdApi = () => {
      list.value.map((item,index) => {
        if(index==0){
          getArticleTree(item.data.itemId)
        }
      });
    };

    const novice = ref([]);
    const getArticleTree = async (itemId) => {
      novice.value = await getArticleTreeApi({
        includeSelf: 0,
        itemId: itemId,
      });
    };

    onMounted(()=>{getItemIdApi()});

    return {
      novice,
    };
  },
});
</script>

<style lang="less" scoped>
.help-main-title {
  padding: 40px 0 0;
  margin-bottom: 16px;
  font-size: 22px;
  color: #000;
}

.help-mian-content {
  &:last-child {
    background: #fafafa;
  }

  .help-content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }

  .help-content-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 60px;
    margin: 0;

    .hct-item {
      display: flex;
      width: 384px;
      padding: 13px 0;
      margin: 0;

      &:not(:nth-child(3n)) {
        margin-right: 24px;
      }

      .hct-item-card {
        width: 30px;
        height: 30px;
        background: url("/src/assets/img/commonTip.png") no-repeat center;
        border-radius: 50%;
      }

      .hct-item-text {
        padding: 5px 10px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;

        &:hover {
          color: #0078ff;
        }
      }
    }
  }
}

.help-list-tpl {
  padding-bottom: 40px;
}
</style>
